<template>
	<view class="particulars">
		<text class="title">{{list.title}}</text>
		<view class="writer">
			<image :src="list.member_avatar" mode="widthFix"></image>
			<view class="name">
				<p>{{ list.member_name }}</p>
				<p>{{ list.create_time_text }}.{{ list.sign_text }}</p>
			</view>
			<button type="default" class="care-for" @click="beCareful(list.member_id)" :class="[list.is_follow.code?'active':'']">关注</button>
		</view>
		<rich-text :nodes="contents" class="contents-text"></rich-text>
		<comment :list="list"></comment>
	</view>
</template>

<script>
	import comment from '@/components/newsList/comment.vue';
	export default {
		components: {
			comment
		},
		data() {
			return {
				id: '',
				list: '',
				contents: '',
			};
		},
		onLoad: function(e) {
			this.id = e.id;
			this.getContents();
		},
		methods: {
			getContents: function() {
				uni.showLoading({
					title: '加载中'
				});
				var authData = uni.getStorageSync('authData');
				if (authData) {
					var Authorization = authData.auth;
					console.log(JSON.stringify(authData));
				} else {
					var Authorization = '';
				}
				uni.request({
					url: this.baseUrl + "/news/details",
					dataType: "json",
					data: {
						type: 'imgtext',
						id: this.id,
					},
					header: {
						Authorization: Authorization
					},
					success: (res) => {
						this.list = res.data.data.list;
						console.log(JSON.stringify(res.data.data.list));
						const regex = new RegExp('<img', 'gi');
						this.contents = res.data.data.list.details.replace(regex, `<img style="max-width: 100%;"`);
					},complete: () => {
						uni.hideLoading();  
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.particulars {
		margin: 30upx 30upx 0upx 30upx;
		height: 1500upx;

		.title {
			height: 103upx;
			font-size: 42upx;
			font-weight: bold;
			color: #282828;
		}

		.writer {
			width: 100%;
			height: 100upx;
			margin: 30upx 0upx 30upx 0upx;
			display: inline-flex;

			.care-for {
				width: 116upx;
				height: 60upx;
				border: 1px solid rgba(238, 15, 36, 1);
				border-radius: 24px;
				background-color: #FFFFFF;
				font-size: 24upx;
				color: #EE0F24;
				margin-top: 20upx;
			}

			image {
				width: 90upx;
				height: 90upx !important;  
				padding: 0upx;
				border-radius: 50%;
				margin-right: 10upx;

			}

			.name {
				width: 450upx;

				p:first-child {
					font-size: 28upx;
					padding-bottom: 15upx;
				}

				p:last-child {
					font-size: 26upx;
					color: #999999;
				}
			}
		}

		.tu {
			width: 690upx;
			padding-top: 60upx;
			height: 380upx;
		}

		.contents-text {
			color: #666666;
			img {
				max-width: 100% !important;
				height: auto;
			}
		}
	}
	.active {
		background-color: red !important;
		color: #ffffff !important;
	}
</style>
